<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布博客</title>
    <!-- Semantic UI 框架 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <!-- 自己编写的 CSS -->
    <link rel="stylesheet" href="../static/css/me.css">
    <!-- editor.md 插件 -->
    <link rel="stylesheet" href="../static/lib/editormd/css/editormd.min.css">
    <script src="../static/lib/editormd/editormd.min.js"></script>
</head>

<body>
    <!-- 导航 -->
    <nav class="ui inverted attached segment me-padded-tb-mini me-shadow">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h1 class="ui item header teal">博客管理</h1>
                <a href="#" class="ui item active me-mobile-hide me-item">
                    <i class="home icon"></i>博客
                </a>
                <a href="#" class="ui item me-mobile-hide me-item">
                    <i class="idea icon"></i>分类
                </a>
                <a href="#" class="ui item me-mobile-hide me-item">
                    <i class="tags icon"></i>标签
                </a>
                <div class="right menu me-mobile-hide me-item">
                    <div class="ui dropdown item">
                        <div class="text">
                            <img src="../static/img/avatar.png" alt="" class="ui avatar image">
                            江南笑书生
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="#" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 移动端控制菜单隐藏与显示 -->
        <!-- <a href="#" class="ui menu toggle black icon button me-right-top me-mobile-show">
            <i class="sidebar icon"></i>
        </a> -->
        <button class="ui secondary icon button menu toggle me-right-top me-mobile-show">
            <i class="sidebar icon"></i>
        </button>
    </nav>
    <div class="ui pointing menu attached">
        <div class="ui container">
            <div class="right menu">
                <a href="#" class="item"><i class="list icon"></i>博客列表</a>
                <a href="#" class="item teal active"><i class="pencil icon"></i>发布博客</a>
            </div>
        </div>
    </div>
    <!-- <div class="ui container bottom attached">
        <div class="ui pointing menu right floated">
            <a href="#" class="item active">列表</a>
            <a href="#" class="item">发布</a>
        </div>
    </div> -->

    <!-- 中间内容 -->
    <div class="ui me-padded-tb-large me-container-small">
        <div class="ui container">
            <form action="#" method="post" class="ui form">
                <div class="required field">
                    <div class="ui left labeled input">
                        <select class="ui compact dropdown label teal basic">
                            <!-- <option value="">分类</option> -->
                            <option value="0">原创</option>
                            <option value="1">转载</option>
                            <option value="2">翻译</option>
                            <option value="3">日志</option>
                        </select>
                        <input type="text" name="blogTitle" id="blogTitle" placeholder="博客标题" required>
                    </div>
                </div>
                <div class="field">
                    <div id="md-area" style="z-index: 1 !important;">
                        <textarea name="content" id="content" placeholder="博客内容" required
                            style="display: none;"></textarea>
                    </div>
                </div>
                <div class="field">
                    <div class="ui left labeled input">
                        <label class="ui label teal basic">首图</label>
                        <input type="url" name="headPicture" id="headPicture" placeholder="首图引用地址" required>
                    </div>
                </div>
                <div class="two fields">
                    <div class="field">
                        <div class="ui left labeled input action">
                            <label class="ui label teal basic">分类</label>
                            <select class="ui dropdown fluid" name="category">
                                <option value="">分类</option>
                                <option value="0">原创</option>
                                <option value="1">转载</option>
                                <option value="2">翻译</option>
                                <option value="3">日志</option>
                            </select>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left labeled input action">
                            <div class="ui label teal basic">标签</div>
                            <select class="ui fluid search dropdown multiple" name="tag" required>
                                <option value="">标签</option>
                                <option value="0">Java</option>
                                <option value="1">Spring</option>
                                <option value="2">Spring Boot</option>
                                <option value="3">MySQL</option>
                                <option value="4">数据结构与算法</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="inline fields">
                    <div class="field">
                        <div class="ui  checkbox">
                            <input type="checkbox" id="recommend" name="recommend">
                            <label for="recommend">推荐</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui  checkbox">
                            <input type="checkbox" id="info" name="info" checked>
                            <label for="info">转载声明</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui  checkbox">
                            <input type="checkbox" id="reward" name="reward" checked>
                            <label for="reward">赞赏</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui  checkbox">
                            <input type="checkbox" id="comment" name="comment" checked>
                            <label for="comment">评论</label>
                        </div>
                    </div>
                </div>
                <div class="ui error message"></div>
                <div class="ui container right aligned">
                    <button type="button" class="ui button" onclick="window.history.go(-1)">
                        返回
                    </button>
                    <button class="ui button">保存</button>
                    <button class="ui teal submit button">发布</button>
                    <!-- <button type="submit" class="ui submit button teal">发布</button> -->
                </div>

            </form>
        </div>
    </div>


    <!-- 底部 -->
    <footer class="ui inverted vertical segment me-padded-tb-massive">
        <div class="ui container center aligned">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <!-- <h4 class="ui inverted header"><i class="wechat icon"></i>与我联系</h4> -->
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../static/img/wechat.jpg" alt="wechat" class="ui rounded image"
                                style="width: 8em;">
                        </div>
                    </div>
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header">联系我</h4>
                    <div class="ui inverted link list">
                        <div class="item">
                            <i class="envelope icon"></i> Email : cplasfyin@163.com
                        </div>
                        <div class="item">
                            <i class="qq icon"></i> QQ : 2916393359
                        </div>
                        <div class="item">
                            <i class="wechat icon"></i> 微信 : DX10485
                        </div>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
                <div class="five wide column">
                    <h4 class="ui inverted header">江南笑书生</h4>
                    <p style="opacity: 0.6 !important;">
                        这是我的个人博客，会分享关于编程、写作、思考相关的内容，希望可以给来到这的人有所帮助
                    </p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p style="opacity: 0.5 !important;">
                Copyright
                <i class="copyright outline icon"></i>
                2020 - 2021 Designed by YGQ
            </p>
        </div>
    </footer>

    <script>
        // 控制移动端导航条显示
        $('.menu.toggle').click(function () {
            $('.me-item').toggleClass('me-mobile-hide');
        });
        // 下拉菜单
        $('.ui.dropdown').dropdown();
        // 前端表单验证
        $('.ui.form').form({
            fields: {
                blogTitle: {
                    identifier: 'blogTitle',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入博客标题'
                    }]
                },
                content: {
                    identifier: 'content',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入博客内容'
                    }]
                },
                headPicture: {
                    identifier: 'headPicture',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入首图引用地址'
                    }, {
                        type: 'url',
                        prompt: '首图引用地址应是一个 url'
                    }]
                },
                category: {
                    identifier: 'category',
                    rules: [{
                        type: 'empty',
                        prompt: '请选择博客分类'
                    }]
                },
                tag: {
                    identifier: 'tag',
                    rules: [{
                        type: 'minCount[1]',
                        prompt: '请至少选择一个标签'
                    }]
                }
            }
        });

    </script>
    <!-- editor.md 插件的js -->
    <script type="text/javascript">
        var contentEditor;

        $(function () {
            contentEditor = editormd("md-area", {
                width: "100%",
                height: 540,
                syncScrolling: "single",
                path: "../static/lib/editormd/lib/"
            });

            /*
            // or
            testEditor = editormd({
                id      : "test-editormd",
                width   : "90%",
                height  : 640,
                path    : "../lib/"
            });
            */
        });
    </script>
</body>

</html>